<template>
	<div>
		<head-top></head-top>
		<br />
		<el-form>
			<el-row class="demo-autocomplete">
				<el-col :span="1">&nbsp;</el-col>
				<el-col :span="1.5">
					<el-button type="primary" plain><b>关键词:</b></el-button>
				</el-col>
				<el-col :span="4">
					<el-input v-model="keyword"
							  placeholder="请输入关键词"
							  suffix-icon="el-icon-edit-outline">
					</el-input>
				</el-col>
				<el-col :span="1">&nbsp;</el-col>
				<el-col :span="2">
					<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
				</el-col>
			</el-row>
		</el-form>
		<br />
		<el-table
		  :data="tableData"
		  border
		  style="width: 100%">
		  <el-table-column
		    fixed
			align="center"
		    prop="id"
		    label="序号"
		    >
		  </el-table-column>
		  <el-table-column
		    prop="keywords"
			align="center"
		    label="关键词"
		    >
		  </el-table-column>
		  <el-table-column
		    prop="customname"
		    label="客户名称"
			align="center"
		    >
		  </el-table-column>
		  <el-table-column
		    prop="agentname"
		    label="代理商"
			align="center"
            width="140"
		    >
		  </el-table-column>
		  <el-table-column
		    prop="serviceyears"
		    label="申请年限"
			align="center"
		    >
		  </el-table-column>
		  <el-table-column
		    prop="regdatetime"
			:formatter="dateFormat"
			align="center"
		    label="申请日期"
            width="170"
		    >
		  </el-table-column>
		  <el-table-column
		    prop="regpassdatetime"
		  	:formatter="dateFormat"
			align="center"
		    label="到期日期"
            width="170"
		    >
		  </el-table-column>
		  <el-table-column
		    label="申请到期状态"
			align="center"
            width="140"
			>
			<template slot-scope="scope">
				<i v-show="scope.row.ispass==0" style="color: #11B95C;">未过期</i>
				<i v-show="scope.row.ispass==1" style="color: #DEA726;">预注册过期</i>
				<i v-show="scope.row.ispass==2" style="color: red;">正式注册过期</i>
			</template>
		  </el-table-column>
		  <el-table-column
		    label="审核状态"
			align="center"
		  	>
			<template slot-scope="scope">
				<i v-show="scope.row.checkstatus==0" style="color: #DEA726;">已申请</i>
				<i v-show="scope.row.checkstatus==1" style="color: #DEA726;">审核中</i>
				<i v-show="scope.row.checkstatus==2" style="color: #11B95C;">已通过</i>
				<i v-show="scope.row.checkstatus==3" style="color: red;">未通过</i>
			</template>
		  </el-table-column>
		  <el-table-column
		    label="使用状态"
			align="center"
			>
			<template slot-scope="scope">
				<i v-show="scope.row.isuse==1" style="color: #11B95C;">使用中</i>
				<i v-show="scope.row.isuse==0" style="color: red;">未使用</i>
			</template>
		  </el-table-column>
          <el-table-column
            label="APP开通状态" width="140"
          			align="center"
          			>
          			<template slot-scope="scope">
          				<i v-show="scope.row.openapp==1" style="color: #11B95C;">已开通</i>
          				<i v-show="scope.row.openapp==0" style="color: red;">未开通</i>
          			</template>
          </el-table-column>
		  <el-table-column fixed="right" align="center" width="140" label="操作">
			  <template slot-scope="scope">
                  <i v-show="scope.row.checkstatus==3" style="color: gray;">无操作</i>
				<el-select @change="ckcz(scope.row.id,scope.$index)" v-model="cz[scope.$index]" v-if="scope.row.checkstatus!=3"  placeholder="请选择">
                    <el-option v-show="scope.row.ispass==0&&scope.row.checkstatus==2&&scope.row.isuse==1&&scope.row.openapp==0"
                      label="开通APP"
                      value="o1">
                    </el-option>
                    <el-option v-show="scope.row.checkstatus==1"
                      label="审核通过"
                      value="s2">
                    </el-option>
                    <el-option v-show="scope.row.checkstatus==1"
                      label="不通过"
                      value="s3">
                    </el-option>
                    <el-option v-show="scope.row.checkstatus==0"
                      label="审核中"
                      value="s1">
                    </el-option>
                    <el-option v-show="scope.row.checkstatus==2"
                      label="续费"
                      value="xf">
                    </el-option>
				    <el-option v-show="scope.row.isuse==1"
				      label="不使用"
				      value="u0">
				    </el-option>
                    <el-option v-show="scope.row.ispass==0&&scope.row.checkstatus==2&&scope.row.isuse==0"
                      label="使用"
                      value="u1">
                    </el-option>
				  </el-select>
			  </template>
		  </el-table-column>
		</el-table>
        <el-pagination
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-size="pageSize"
              layout="total,  prev, pager, next, jumper"
              :total="total">
            </el-pagination>
			<!-- 开通App -->
			<el-dialog title="开通APP" :visible.sync="dialogFormOpenAPP">
				<el-form :model="askeywordsObj">
					<el-form-item label="登陆账号:" :label-width="formLabelWidth">
						<el-input v-model="askeywordsObj.appusername" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="登陆密码:" :label-width="formLabelWidth">
						<el-input v-model="askeywordsObj.apppassword" autocomplete="off"></el-input>
					</el-form-item>
					<el-row class="row-bg" align="center">
						<el-col :span="4">
							<el-tag>关键词:</el-tag>
						</el-col>
						<el-col :span="6">
							<el-link :underline="false">{{askeywordsObj.keywords}}</el-link>
						</el-col>
						<el-col :span="4">
							<el-divider direction="vertical"></el-divider>
						</el-col>
						<el-col :span="4">
							<el-tag>企业名称:</el-tag>
						</el-col>
						<el-col :span="6">
							<el-link :underline="false">{{askeywordsObj.customname}}</el-link>
						</el-col>
					</el-row>
					<el-row class="row-bg" align="center">
						<el-col :span="4">
							<el-tag>价格:</el-tag>
						</el-col>
						<el-col :span="6">
							<el-link :underline="false">{{askeywordsObj.price}}</el-link>
						</el-col>
						<el-col :span="4">
							<el-divider direction="vertical"></el-divider>
						</el-col>
						<el-col :span="4">
							<el-tag>服务类型:</el-tag>
						</el-col>
						<el-col :span="6">
							<el-link :underline="false">{{askeywordsObj.producttype|productTypeFilter}}</el-link>
						</el-col>
					</el-row>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormOpenAPP = false">取 消</el-button>
					<el-button type="primary" @click="saveOpenApp(askeywordsObj.id)">确 定</el-button>
				</div>
			</el-dialog>
            <!-- 续费 -->
            <el-dialog title="欢迎续费" :visible.sync="dialogFormMoney">
            	<el-form :model="askeywordsObj">
            		<el-tag>当前账户余额为:</el-tag>
            		<el-link :underline="false">¥:{{askeywordsObj.preregfrozenmoney}}</el-link>
            		<el-row class="row-bg" align="center">
            			<el-col :span="4">
            				<el-tag>关键字:</el-tag>
            			</el-col>
            			<el-col :span="6">
            				<el-link :underline="false">{{askeywordsObj.keywords}}</el-link>
            			</el-col>
            			<el-col :span="4">
            				<el-divider direction="vertical"></el-divider>
            			</el-col>
            			<el-col :span="4">
            				<el-tag>客户名称:</el-tag>
            			</el-col>
            			<el-col :span="6">
            				<el-link :underline="false">{{askeywordsObj.customname}}</el-link>
            			</el-col>
            		</el-row>
            		<el-form-item label="服务类别:" :label-width="formLabelWidth">
            			<el-select v-model="AppleObj" placeholder="请选择服务类别">
            				<el-option v-for="item in Appleli" :key="item.configvalue" :label="item.configtypename" :value="item.configvalue">
            				</el-option>
            			</el-select>
            		</el-form-item>
            		<el-form-item label="服务年限:" :label-width="formLabelWidth">
            			<el-select v-model="YareObj" placeholder="请选择年限">
            				<el-option v-for="item in Yearli.configvalue" :key="item" :value="item" :label="item">
            				</el-option>
            			</el-select>
            		</el-form-item>
            		<el-tag>价格:</el-tag>
            		<el-link :underline="false">{{sumprice}}</el-link>
            	</el-form>
            	<div slot="footer" class="dialog-footer">
            		<el-button @click="dialogFormMoney = false">取 消</el-button>
            		<el-button type="primary" @click="saveMoney(askeywordsObj.id)">确 定</el-button>
            	</div>
            </el-dialog>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	import headTop from '../components/headTop'
	import moment from 'moment/moment'
	import {getAsKeywords,updateKeyword,findOneasKeywords,findYear,findApple,updateasKeywordsmeonyyear,insertasAccount,updateAsAccountMoeny} from '@/api/getData'
	export default {
		computed: {
		 	...mapState(['adminInfo']),
		 },
		components: {
			headTop,
		},
		data(){
			return {
                cz:['','','','',''],
				keyword:'',
				tableData:[],
				pageNum:1,
				pageSize:5,
                total:0,
                //开通APP对话框
                dialogFormOpenAPP: false,
                //formLabelWidth
                formLabelWidth: '120px',
                //关键字对象
                askeywordsObj: {},
                //总价格
                sumprice: 0,
                //续费对话框
                dialogFormMoney: false,
                //是否上传苹果商城列表
                Appleli: [],
                //是否苹果对象
                AppleObj: {},
                //年份对象
                YareObj: 0,
                //年份列表
                Yearli: {},
			}
		},
		mounted(){
			this.getAsKeywords();
		},
        //动态加载
        watch: {
        	YareObj: function() {
        		this.Sumpricemth()
        	},
        	AppleObj: function() {
        		this.Sumpricemth()
        	}
        },
		methods:{
            //总钱数
            Sumpricemth() {
            	this.sumprice = parseInt(this.YareObj) * parseInt(this.AppleObj);
            },
            search(){
                this.pageNum=1;
                this.getAsKeywords();
            },
			async getAsKeywords(){
				let params={name:this.keyword,pageNum:this.pageNum,pageSize:this.pageSize};
				 const test = await getAsKeywords(params);
				 this.tableData=test.rows;
                 this.total=test.total;
			},
			dateFormat:function(row,column){
				var date = row[column.property];
		         if (date == undefined) {
		            return "";
		         }
		         return moment(date).format("YYYY-MM-DD HH:mm:ss");
			},
            async zxcz(params){
                 const res = await updateKeyword({...params,userid:this.adminInfo.user.id,usercode:this.adminInfo.user.usercode});
                if (res.status == 1) {

                	this.$message({

                        type: 'success',

                        message: "操作成功!"

                    });
                	this.getAsKeywords();
                }else{

                	this.$message({

                        type: 'error',

                        message: "操作失败!"

                    });
                    }
            },
            async ckcz(id,index){
                var params={};
                var cz=this.cz[index];
                this.cz[index]='';
                switch(cz){
                    case "o1": this.openappcli(id);return false;break;
                    case "xf": this.findmoney(id);return false;break;
                    case "u0":params={id:id,isuse:0};break;
                    case "u1":params={id:id,isuse:1};break;
                    case "s1":params={id:id,checkstatus:1};break;
                    case "s2":params={id:id,checkstatus:2};break;
                    case "s3":params={id:id,checkstatus:3};break;
                }
                this.zxcz(params);
            }, handleCurrentChange(val) {
                this.pageNum=val;
                this.getAsKeywords();
            },
            //打开续费对话框
            async findmoney(id) {
            	this.dialogFormMoney = true;
            	const res = await findOneasKeywords(id);
            	this.Yearli = await findYear();
            	this.Yearli = this.Yearli[0];
            	this.Yearli.configvalue = parseInt(this.Yearli.configvalue);
            	this.Appleli = await findApple()
            	this.askeywordsObj = res;
            },
            //打开开通app对话框
            async openappcli(id) {
            	this.dialogFormOpenAPP = true
            	const res = await findOneasKeywords(id);
            	this.askeywordsObj = res;
            },//保存开通APP
			async saveOpenApp(id) {
				this.askeywordsObj.openapp = 1;
				this.zxcz(this.askeywordsObj)
				this.dialogFormOpenAPP = false
			},
            //确定打钱续费
            saveMoney(id) {
            	if (this.sumprice > this.askeywordsObj.preregfrozenmoney) {
            		this.$confirm('您的余额不足, 请充值!', '提示', {
            			type: 'warning'
            		}).then(() => {}).catch(() => {
            			this.$message({
            				type: 'info',
            				message: '已取消续费'
            			});
            		});
            	} else {
            		this.$confirm('此操作将永久扣除资金, 是否继续?', '提示', {
            			confirmButtonText: '确定',
            			cancelButtonText: '取消',
            			type: 'warning'
            		}).then(() => {
            			this.daqian();
            			this.$message({
            				type: 'success',
            				message: '续费成功!'
            			});
            		}).catch(() => {
            			this.$message({
            				type: 'info',
            				message: '已取消续费'
            			});
            		});
            	}
            	this.dialogFormMoney = false;
            },
            //续费处理
            async daqian() {
            	this.askeywordsObj.preregfrozenmoney = this.askeywordsObj.preregfrozenmoney - this.sumprice
            	await updateasKeywordsmeonyyear({
            		...this.askeywordsObj,
            		year: this.YareObj,
					userid:this.adminInfo.user.id,
					usercode:this.adminInfo.user.usercode
            	})
                this.getAsKeywords();
            	await updateAsAccountMoeny(this.sumprice)
            	await insertasAccount({
            		userid: this.adminInfo.user.id,
            		detailtypename: this.YareObj + "年" + this.sumprice + "元",
            		money: this.sumprice,
            		accountmoney: this.askeywordsObj.preregfrozenmoney,
            		memo: this.adminInfo.user.username + '对' + this.askeywordsObj.customname + '进行关键性续费操作,扣除续费资金:' + this.YareObj +
            			'年' + this.sumprice + '元'
            	});
            }
		},
        filters:{
            productTypeFilter: function(val) {
            	if (val == 1) {
            		return '上传苹果商城'
            	} else if (val == 2) {
            		return '不上传苹果商城'
            	}
            }
        }
	}
</script>

<style>
</style>
